<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>treemap</title>
    <script type="text/javascript" src="../../deps/d3.js"></script>
    <script type="text/javascript" src="../../deps/raphael.min.js"></script>
    <script type="text/javascript" src="../../deps/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../deps/seajs/sea.js"></script>


  <STYLE type="text/css">
#chart {
    border-top: 1px dashed #F00;
    border-bottom: 1px dashed #F00;
    padding-left: 20px;
}

</STYLE>
  </head>

  <body>
    <div id="hover">hover node info</div>
    <div id="info">click leaf node info</div>
    <div id="chart"></div>

    <script type="text/javascript">
    //http://planetozh.com/blog/2008/04/javascript-basename-and-dirname/
    var dir = window.location.href.replace(/\\/g,'/').replace(/\/[^\/]*$/, '');
    seajs.config({
        alias: {
            'datav': dir + '/../../datav.js',
            'treemap': dir + '/../../libs/treemap.js'
        }
    });
    </script>
    <script type="text/javascript">
    seajs.use(["treemap", "datav"], function (Treemap, DataV) {
        DataV.changeTheme("theme0");
        var treemap = new Treemap("chart", {});
        d3.json("category_ratio.json", function(source) {
            treemap.setSource(source);
            treemap.setLeafNodeClick(function (){
                //$("info").html(this.name);
                document.getElementById("info").innerHTML = this.name + " is a leaf node.";
                });
            treemap.hover(function(){
                    document.getElementById("hover").innerHTML = "hover " + this.name;
                },function(){
                    document.getElementById("hover").innerHTML = "leave " + this.name;
                });
            treemap.render();
        });
    });
    </script>

  </body>
</html>
